<template>
  <div>
    <el-card class="user-save-card">
      <div slot="header" class="clearfix">
        <h1 class="user-save-title">添加用户</h1>
      </div>
      <div>
        <el-form
          :model="user"
          :rules="rules"
          ref="user"
          label-width="80px"
          class="demo-ruleForm"
          status-icon
        >
          <el-form-item label="用户名" prop="username">
            <el-input v-model="user.username"></el-input>
          </el-form-item>
          <el-form-item label="昵称" prop="nickname">
            <el-input v-model="user.nickname"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              type="password"
              v-model="user.password"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="rePassword">
            <el-input
              type="password"
              v-model="user.rePassword"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('user')"
              >添加用户</el-button
            >
            <el-button @click="resetForm('user')"> 清空所有</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { reqAddUsers } from "../api/users";
export default {
  name: "UserSave",
  data() {
    return {
      user: {
        username: "",
        nickname: "",
        password: "",
        rePassword: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名称", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" },
        ],
        nickname: [
          { required: true, message: "请输入昵称", trigger: "blur" },
          { min: 2, max: 6, message: "长度在 2 到 6 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, validator: this.validatePass, trigger: "blur" },
        ],
        rePassword: [
          { required: true, validator: this.validatePass2, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    validatePass(rule, value, callback) {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.user.rePassword !== "") {
          this.$refs.user.validateField("rePassword");
        }
        callback();
      }
    },
    validatePass2(rule, value, callback) {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value && value !== this.user.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    },
    submitForm(user) {
      this.$refs[user].validate(async (valid) => {
        if (valid) {
          try {
            const { username, nickname, password } = this.user;
            await reqAddUsers({ username, nickname, password });
            this.$router.history.push("/user");
            this.$message({
              message: "创建用户成功~~",
              type: "success",
            });
          } catch (e) {
            this.$message.error(e);
            return false;
          }
        } else {
          this.$message.error("请输入正确的用户信息");
          return false;
        }
      });
    },
    resetForm(user) {
      this.$refs[user].resetFields();
    },
  },
};
</script>

<style  scoped>
.demo-ruleForm {
  width: 350px;
}
</style>
